<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" id="vp" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<title>班级排行</title>
		<link rel="stylesheet" type="text/css" href="../../../css/style.css">
		<link rel="stylesheet" type="text/css" href="../../../css/mui.css">
		<link href="../../../css/mui.picker.min.css" rel="stylesheet" />
		<style>
			#shop .as{
				margin-top: 41px;
			}
			.update {
				font-style: normal;
				color: #aab2bd;
				margin-right: -25px;
				font-size: 15px
			}
			.mui-table-view-cell:after{
				left: 0;
			}
			.textarea{
			  width: 100%;
			  min-height: 200px;
			  overflow-y: auto;
			  background: #fff;
			  margin-top: 10px;
			  color: #ccc;
			}
			.leavebtn{
				width: 80%;
				background: #25aae3;
				margin: 0 auto;
				text-align: center;
				color:#fff;
				height: 40px;
				line-height: 40px;
				margin-top: 20px;
			}
		</style>
	</head>
	<body>
		<div id="leave">
			<ul class="mui-table-view  mui-table-view-chevron" style="margin-top: 0px;">
						<li class="mui-table-view-cell" id='showUserPicker'>
							<a class="mui-navigate-right"><span>请假类型</span><i class="mui-pull-right update" id="relation">请选择(必填)</i></a>
						</li>
						<li class="mui-table-view-cell" id='stardate'>
							<a class="mui-navigate-right"><span>开始时间</span><i class="mui-pull-right update" id="setDate">请选择(必填)</i></a> 
						</li>
						<li class="mui-table-view-cell" id='enddate'>
							<a class="mui-navigate-right"><span>结束时间</span><i class="mui-pull-right update" id="setDatea">请选择(必填)</i></a>
						</li>
					</ul>
					
					<textarea id="textarea" class="textarea" placeholder="请输入请假事由"></textarea>
			<!--div contenteditable="true" class="textarea"><div>请输入请假事由</div>留言（请输入请假原因）</div-->
			<div id="leavebtn" class="leavebtn">提交</div>
		</div>
		<script src="../../../js/mui.min.js "></script>
		<script src="../../../js/app.js"></script>
		<script src="../../../js/mui.view.js "></script>
		<script src="../../../js/mui.picker.js"></script>
		<script src="../../../js/mui.picker.min.js"></script>
		<script src="../../../js/mui.poppicker.js"></script>
		<script src="../../../js/jquery-1.8.3.min.js"></script>
		<script>
		mui.init();
		var uid="";
		var leavetype='';
		mui.plusReady(function() {
			var state = app.getState(); 
			uid = state.userid;
		});
		
			(function($, doc) {
				$.init();
				$.ready(function() {
					/**
					 * 获取对象属性的值
					 * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
					 * @param {Object} obj 对象
					 * @param {String} param 属性名
					 */
					var _getParam = function(obj, param) {
						return obj[param] || '';
					};
					//普通示例
					var userPicker = new $.PopPicker();
					userPicker.setData(['事假','病假']);
					var showUserPickerButton = doc.getElementById('showUserPicker');
					var userResult = doc.getElementById('relation');
					showUserPickerButton.addEventListener('tap', function(event) {
						userPicker.show(function(items) {
							var stringrelation=JSON.stringify(items[0]);
							var reg = new RegExp('"',"g");  
							stringrelation = stringrelation.replace(reg, "");
							userResult.innerText =stringrelation;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
					//-----------------------------------------
					//级联示例
					document.getElementById("stardate").addEventListener('tap', function () {
                var datePicker=new mui.DtPicker({
                    type:'date',//若只显示年月日，类型为date，
                    beginDate:new Date(),//开始时间，即所显示的时间里，最早的年份日期
                    endDate:new Date(2100,01,01),//不传参数，表示为当前时间 
                  });
                  datePicker.show(function(selectItems){
                    //将选择的年月日显示到屏幕上
                    document.getElementById('setDate').innerHTML=selectItems;
                  });
            })
					//级联示例
					document.getElementById("enddate").addEventListener('tap', function () {
                var datePicker=new mui.DtPicker({
                    type:'date',//若只显示年月日，类型为date，
                    beginDate:new Date(),//开始时间，即所显示的时间里，最早的年份日期
                    endDate:new Date(2100,01,01),//不传参数，表示为当前时间
                  });
                  datePicker.show(function(selectItems){
                    //将选择的年月日显示到屏幕上
                    document.getElementById('setDatea').innerHTML=selectItems;
                  });
            })
		  mui('#sexTab').on('tap', 'span', function() {
		  	
            document.getElementById('sex').innerHTML=this.innerHTML;
			mui("#sexTab").popover('toggle');//这是可以用来关闭底部弹窗的事件
			})
		  
				});
			})(mui, document);
			
			document.getElementById('leavebtn').addEventListener('tap',function(){
				
				
				var setDate=$('#setDate').html();
				var setDatea=$('#setDatea').html();
				var textarea=$('#textarea').val();
				if($('#relation').html()=='事假'){
					leavetype=1
				}else if($('#relation').html()=='病假'){
					leavetype=2
				}
				if( leavetype!='' && setDate!='请选择(必填)' && setDatea!='请选择(必填)' && textarea!=''){
					mui.post(Apiurl+'index/leave',{
					uid:uid,
					type:leavetype,
					stime:setDate,
					etime:setDatea,
					reason:textarea,
					cid:1
					},function(data){
						if(data.status==200){
							plus.nativeUI.toast('请假成功', {
							verticalAlign: 'middle'
							});
						}
						//plus.webview.currentWebview().close();
					},'json')
				}else if(leavetype==''){
					plus.nativeUI.toast('请选择请假类型', {
							verticalAlign: 'middle'
						});
				}else if(setDate=='请选择(必填)'){
					plus.nativeUI.toast('请选择开始时间', {
							verticalAlign: 'middle'
						});
				}else if(setDatea=='请选择(必填)'){
					plus.nativeUI.toast('请选择结束时间', {
							verticalAlign: 'middle'
						});
				}else if(textarea==''){
					plus.nativeUI.toast('请填写请假具体原因', {
							verticalAlign: 'middle'
						});
				}
				
				
			})
			$(function(){
				$('.textarea').focus(function(){
					$(this).html('').css('color','#000');
					
				}).blur(function(){
					
				})
			})
			
		</script>
	</body>
</html>
